<template>
    <view class="home">
        <view class="banner">
            <!-- 轮播图:循环渲染轮播图的 item 项 -->
            <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true">
                <swiper-item v-for="(item, i) in swiperList" :key="i">
                    <view class="swiper-item">
                        <!-- 动态绑定图片的 src 属性 -->
                        <image :src="item.path"></image>
                    </view>
                </swiper-item>
            </swiper>
        </view>
        <view class="cu-bar">
            <view class="search-form round">
               <input class="text-gray" @focus="gotoSeach()" type="text" 
                        placeholder="输入果蔬名称了解相关信息"></input>
                <uni-icons type="search" size="26"></uni-icons>
            </view>
        </view>
        <view class='ai-view' @click="toDetect">
            <image src='/static/images/paizhao.png' class='ai-paizhao'></image>
			<text class='txt'>拍照检测</text>
        </view>

        <view class="resultBox" v-show="isShow">
            <button @click="isShow = false">X</button>
            <image :src="'data:image/jpg;base64,' + imageUrl" mode="widthFix"></image>
            <text>识别信息：</text>
            <view v-for="(item,index) in resultInfo" :key="index">
                <text>水果名称:{{item.FruitName}}</text> </br>
                <text>成熟数量:{{item.matureCount}}</text></br>
                <text>总数量:{{item.totalCount}}</text></br>
                <text>成熟度:{{(item.matureCount/item.totalCount)*100}}%</text>
            </view>
        </view>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                baseUrl: uni.$request.baseUrl,
                swiperList: [{
                    id: '',
                    path: '/static/home_icons/jing.png',
                    is_delete: ''
                }],
                imageUrl: '',
                isShow: false,
                resultInfo: [{}],
                fruitName: '',
                matureCount: '',
                totalCount: ''
            }

        },
        methods: {
            toDetect() {
                // uni.navigateTo({
                // url:'../../pkg/photograph/photograph'
                // }),
                if (!uni.getStorageSync("token")) {
                    uni.navigateTo({
                        url: '/pkg/login/login'
                    })
                } else {
                    uni.navigateTo({
                        url:'../../pkg/ai-camera/ai-camera'
                    })
                    // uni.chooseImage({
                    //     count: 1,
                    //     sizeType: ['original', 'compressed'],
                    //     sourceType: ['camera', 'album'], //这要注意，camera拍照，album是打开手机相册
                    //     success: (res) => {
                    //         // console.log(res)
                    //         this.imageList = res.tempFilePaths
                    //         uni.uploadFile({
                    //             url: this.baseUrl + '/common/upload',
                    //             filePath: res.tempFilePaths[0],
                    //             name: 'file',
                    //             header: {
                    //                 "Authorization": uni.getStorageSync("token"),
                    //                 "Content-Type": "multipart/form-data"
                    //             },
                    //             success: (res) => {
                    //                 //微信：res
                    //                 //服务器：res.data
                    //                 const data = JSON.parse(res.data);
                    //                 const filename = data.data;
                    //                 // 检测请求
                    //                 this.detectImage(filename);
                    //             }
                    //         })

                    //     }
                    // });
                }
            },
            async detectImage(filename) {
                try {
                    const {
                        data: res
                    } = await uni.$request.get('/detect', {
                        filename: filename
                    });
                    if (res.code == 200) {
                        // res.data 是服务器返回的JSON对象
                        // console.log(res.data);
                        this.imageUrl = res.data.image
                        this.resultInfo = res.data.info
                        this.isShow = true
                        this.fruitName = res.data.info[0].FruitName
                        this.matureCount = res.data.info[0].MatureCount
                        this.totalCount = res.data.info[0].TotalCount

                    }
                    uni.navigateTo({
                        url:'../../pkg/result/result'
                    })
                } catch (error) {
                    uni.showToast({
                        title: '检测失败！',
                        icon: 'exception',
                        duration: 1000
                    });
                }
                

            },
            addToHistory() {
                //将检测结果添加到历史


            },
            getChart() {
                uni.request({
                    url: 'http://139.198.187.252:8081/chart',
                    method: 'GET',
                    success: res => {
                        console.log(res)
                        this.swiperList = res.data.data
                    },
                    fail: error => {
                        console.log(error)
                    }
                })
            }
        },
        created() {
            this.getChart()
        }
    }
</script>

<style lang="less">
    .home {
        display: flex;
        flex-direction: column;
        height: 100%;

        .banner {
            swiper {
                height: 330rpx;

                .swiper-item,
                image {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        
        .cu-bar {
            width: 90%;
            padding-top: 40rpx;
            margin: 0 auto;
        }

        .cu-bar .search-form {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: calc(100% - 20px);
            padding-left:10px;
            padding-right:10px;
            height: 90rpx;
            background-color: #ffffff;

        }

        .cu-bar .search-form input {
            width: calc(100% - 60rpx);
            height: 90rpx;
        }


        .round {
            border-radius: 5000upx;
        }

        .text-gray {
            color: #001a0f;
            font-size: 15px;
        }


        .ai-view {
            flex: 1;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            // padding-top: 100px;
        }

        .txt {
            font-size: 24rpx;
            /*font-weight: bold;*/
            color: #00cc77;
            margin-top: 10rpx;
        }

        .ai-paizhao {
            width: 150rpx;
            height: 150rpx;
        }




        .resultBox {
            position: absolute;

            top: 25%;
            width: 400px;
            height: 450px;
            // border: 5px solid;
        }

        .resultBox button {
            position: absolute;
            float: right;
        }

        .resultBox image {
            width: 100%;
            height: 70%;
        }
    }
</style>
